<template>
    <div :loading="loading" class=" bg-white p-4 rounded">
        <el-form :model="form" label-width="160px">
            <h5 class="bg-gray-100 p-3 rounded mb-5">基础设置</h5>
            <el-form-item label="分销启用">
                <el-radio-group v-model="form.distribution_open">
                    <el-radio :label="0" border>
                        禁用
                    </el-radio>
                    <el-radio :label="1" border>
                        开启
                    </el-radio>
                </el-radio-group>

            </el-form-item>
            <el-form-item label="分销海报图">
                <ChooseImage :limit="9" v-model="form.spread_banners"/>

            </el-form-item>
            <h5 class="bg-gray-100 p-3 rounded mb-5">返佣设置</h5>
            <el-form-item label="一级返佣比例">
                <div>
                    <el-input v-model="form.store_first_rebate" size="normal" style="width: 50%;" type="number">
                        <template #append>%</template>
                    </el-input>
                    <p class="text-gray-500 ">秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>
                </div>

            </el-form-item>
            <el-form-item label="二级返佣比例">
                <div>
                    <el-input v-model="form.store_second_rebate" size="normal" style="width: 50%;" type="number">
                        <template #append>%</template>
                    </el-input>
                    <p class="text-gray-500 ">秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>
                </div>

            </el-form-item>
            <el-form-item label="自购返佣">
                <el-radio-group v-model="form.distribution_open">
                    <el-radio :label="1" border>
                        是
                    </el-radio>
                    <el-radio :label="0" border>
                        否
                    </el-radio>
                </el-radio-group>
                <p class="text-gray-500 ">秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>

            </el-form-item>
            <h5 class="bg-gray-100 p-3 rounded mb-5">结算设置</h5>
            <el-form-item label="结算时间" style="width: 80%;">
                <div>
                    <el-input v-model="form.settlement_days" size="normal" style="width: 50%;" type="number">
                        <template #prepend>订单完成后</template>
                        <template #append>天</template>
                    </el-input>
                    <p class="text-gray-500 ">秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>
                </div>

            </el-form-item>

            <el-form-item label="佣金到账方式">
                <el-radio-group v-model="form.brokerage_method">
                    <el-radio label="hand" border>
                        手动到账
                    </el-radio>
                    <el-radio label="wx" border>
                        自动到微信
                    </el-radio>
                </el-radio-group>
                <p class="text-gray-500 ">秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>

            </el-form-item>
            <el-form-item>
                <el-button :loading=loading type="primary" size="default" @click="submit">保存</el-button>

            </el-form-item>

        </el-form>


    </div>
</template>
<script setup>
import { getAgentconfig, setAgentconfig } from '~/api/distribution.js'
import { reactive, ref } from 'vue'
import { toast } from '~/composables/util.js'
import ChooseImage from "~/components/ChooseImage.vue";
const form = reactive({
    "distribution_open": 1,
    "store_first_rebate": 10,
    "store_second_rebate": 20,
    "spread_banners": [
        "http://...png",
        // ...
    ],
    "is_self_brokerage": 1,
    "settlement_days": 7,
    "brokerage_method": "hand"
})
//获取数据并且刷新
const loading = ref(false)
function getData() {
    loading.value = true
    getAgentconfig()
        .then(res => {
            for (const k in form) {
                // 把响应回来数据的指定key赋值给form的指定key值
                form[k] = res[k];
            }
            // 把字符串进行逗号分割编程数组
            form.password_encrypt = form.password_encrypt.split(',')
            console.log(res);
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

const submit = () => {
    loading.value = true
    //把数组作为字符串传递参数使用join
    setAgentconfig({
        ...form,
    }).then(res => {
        toast('修改成')
        getData()
    }).finally(() => {
        loading.value = false
    })
}
</script>